<template>
    <div class="login">
        <header-test :name="type === 'login' ? '登录':'注册'" :back="'/home'" />
        <img 
            src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png"
            alt=""
        />
        <div v-if="type === 'login'">
            <van-form @submit="onSubmit" class="form">
                <van-cell-group inset>
                    <van-field 
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required:true,message:'请输入用户名' }]"
                    />
                    <van-field 
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required:true,message:'请填写密码' }]"
                    />
                </van-cell-group>
                <div class="register" @click="changeType">立即注册</div>
                <div style="margin:16px">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>
        <div v-else>
            <van-form @submit="onSubmit" class="form">
                <van-cell-group inset>
                    <van-field 
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules = "[{ required: true, message: '请输入图用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required:true, message:'请填写密码' }]" />
                </van-cell-group>
                <div class="register" @click="changeType">已有账号</div>
                <div style="margin:16px">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import HeaderTest from "@/components/HeaderTest.vue";
import { login,register } from "@/service/user";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { reactive,toRefs } from "@vue/reactivity";
import md5 from "js-md5"
import { setLocal } from "@/common/utils";
export default {
    name:"Login",
    setup(){
        const router = useRouter();
        const state = reactive({
            username:"",
            password:"",
            type:"login",
        });
        const onSubmit = async(values) => {
            try {
                if (state.type === "login"){
                    const { data } = await login({
                        loginName: values.username,
                        passwordMd5:md5(values.password),
                    });
                    setLocal("token",data);
                    router.push("/home");
                    window.location.href = "/shop_test";
                }else{
                    await register({
                        loginName:values.username,
                        password:values.password,
                    });
                    type = "login";
                }
            }catch(error){
                console.log(error,"-er");
                Toast.fail(error);
            }
        };
        const changeType = () => {
            if(state.type === "login"){
                state.type = "register";
            }else{
                state.type = "login";
            }
        };
        return {
            ...toRefs(state),
            onSubmit,
            changeType,
        };
    },
    components:{
        HeaderTest,
    },
};

</script>

<style lang="less" scoped>
.login{
    margin:6rem auto 0;
    > img {
        width: 7rem;
        height: 7rem;
    }
    .form {
        margin: 0 1.25rem;
        .van-field {
            padding-left: 0;
            padding-right: 0;
        }
        .register {
            text-align: left;
            margin: 0.5rem 1rem;
            color: rgb(93, 179, 255);
        }
    }
}


</style>
